<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        ul{
            width:  430px;
            margin: 30px auto;
            overflow: hidden;
        }
        ul li{
            float: left;
            width: 100px;
            height: 30px;
            background: red; color: white;line-height: 30px; text-align: center; margin:0 5px;
            transform: skewX(-30deg);
        }
        ul li span{
            display: block;
            transform: skewX(30deg);
        }
        ul li:first-child{
            padding-left: 10px;
            margin-left: -10px;
        }
        ul li:last-child{
            padding-right: 10px;
            margin-right: -10px;
        }


    </style>
</head>
<body>
<div>
    <ul>
        <li class="active"><span>首页</span></li>
        <li><span>关于我们</span></li>
        <li><span>联系方式</span></li>
        <li><span>招聘信息</span></li>
    </ul>
</div>

</body>
</html>